<template>
	<view class="MyCollection bigestBox">
		<view v-if="showEmpty">
		  <view class="my-orders-index-empty">暂无收藏</view>
		</view>
		<view class="" v-for="(item) in myCollectList" :key="item.id">
			<view class="MyCollect boxSize_bb flex">
				<image :src="item.roomCategoryCover" mode="" class="mc_left"></image>
				<view class="mc_right flexDeCo">
					<view class="mcr_top flex_jcsb">
						<view class="mcrt_left">{{item.roomCategoryName}}</view>
						<view class="mcrt_right" @tap="navTo">立即预定</view>
					</view>
					<view class="mcr_bottom flex_jcsb">
						<view class="mcrb_left" @tap="navTo">房间详情></view>
						<view class="mcrb_right" @click="cancelCollect(item.id)">取消收藏</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		navigateTo
	} from "@/utils/promise"
	import {
		getMyFavoriteList,deleteFavorite
	} from "../../api/room";
	export default {
		data() {
			return {
				myCollectList: [],
				showEmpty: false
			};
		},
		onLoad() {
			this.getFavoriteList()
		},
		methods: {
			navTo() {
				navigateTo("/pages/HotelRoomListPage/HotelRoomListPage")
			},
			getFavoriteList() {
				let params = {}
				params.current = 1
				params.size = 1000
				getMyFavoriteList().then((res) => {
					console.log("getMyFavoriteList----res")
					console.log(res)
					if (res.code == 200) {
						this.myCollectList = res.data.records
						this.showEmpty = this.myCollectList.length === 0
					}
					console.log(this.myCollectList)
				}).catch((err) => {
					console.log(err)
				})
			},
			cancelCollect(collectId) {
				this.isCollected = !this.isCollected;
				//取消收藏
				deleteFavorite({
					id: collectId
				}).then((res) => {
					console.log('cancelCollect----res')
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'success'
						});
						this.getFavoriteList()
					}
				}).catch((err) => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.my-orders-index-empty {
	  width: 100%;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  padding-top: 200rpx;
	  font-size: 28rpx;
	}
	
	.MyCollection {
		padding-top: 20rpx;
		font-family: 'PingFang SC';
		letter-spacing: 0px;
		color: #222222;
		ont-weight: 400;

		.MyCollect {
			padding: 30rpx 30rpx 50rpx 30rpx;
			background: #FFFFFF;

			.mc_left {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;

			}

			.mc_right {
				flex: 1;
				margin-left: 20rpx;
				justify-content: space-between;

				.mcr_top {
					.mcrt_left {
						font-weight: bold;
						font-size: 28rpx;
					}

					.mcrt_right {
						width: 160rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						border-radius: 4px;
						background: #0F4C97;
						font-size: 26rpx;
						color: #FFFFFF;
					}
				}

				.mcr_bottom {
					.mcrb_left {
						font-size: 28rpx;
					}

					.mcrb_right {
						font-size: 26rpx;
						color: #979797;

					}

				}
			}
		}
	}
</style>